<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title == 0 ? '新增' : '修改'"
    width="40%"
  >
    <div style="padding: 0 60px">
      <el-form :model="form" :label-width="props.width ? props.width : '60px'">
        <template v-for="(item, index) in props.dialogLab" :key="index">
          <el-form-item :label="item.label">
            <template v-if="item.type == 'select'">
              <el-select v-model="form[item.field]" placeholder="">
                <el-option
                  v-for="items in item.selectdata"
                  :label="items[item.name]"
                  :value="items[item.value]"
                />
              </el-select>
            </template>
            <!-- 图片 -->
            <template v-else-if="item.type == 'img'">
              <el-upload
                class="avatar-uploader"
                :file-list="fileList[item.field]"
                :auto-upload="true"
                :data="item.field"
                :show-file-list="true"
                list-type="picture-card"
                accept=".png"
                :limit="item.limit"
                :http-request="upload"
                :on-change="onchange"
              >
              </el-upload>
            </template>
            <!-- 图标 -->
            <template v-else-if="item.type == 'icon'">
              <div>
                <component :is="form[item.field]"></component>
                <el-button type="primary" @click="clickicon(item.field)"
                  >选择图标</el-button
                >
              </div>
            </template>
            <!-- 富文本 -->
            <template v-else-if="item.type == 'rich'">
              <richText
                v-model:content="form[item.field]"
                style="min-height: 200px; overflow-y: hidden"
              />
            </template>
            <!-- 权限状态树 -->
            <template v-else-if="item.type == 'tree'">
              <!-- 这里加个if是因为该组件会缓存之前绑定的数据 -->
              <template v-if="dialogVisible">
                <el-tree
                  :data="item.selectdata"
                  show-checkbox
                  :node-key="item.nodeKey"
                  :defaultCheckedKeys="form[item.checkid]"
                  @check="(e, m) => handleCheckChange(e, m, item.field)"
                  :props="item.defaultProps"
                />
              </template>
            </template>
			
			<template  v-else-if="item.type == 'textarea'">
			  <el-input v-model="form[item.field]" type="textarea" />
			</template>
            <template v-else>
              <el-input v-model="form[item.field]" />
            </template>
          </el-form-item>
        </template>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="onclone()">取消</el-button>
        <el-button type="primary" @click="onsubmit()"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
  <elicon :iconstar="iconStar" @onIcon="onIcon" />
</template>

<script setup>
import { clone } from "lodash";
import { ref, reactive, nextTick } from "vue";
import elicon from "@/components/elicon/elicon.vue";
import { updata } from "../../service/index";
import richText from "@/components/richText/richText.vue";

const props = defineProps(["dialogLab", "width"]);
const emit = defineEmits(["formEmit"]);
let form = reactive({});
const uploadRef = ref();
let dialogVisible = ref(false);
const title = ref(0);
const fileList = reactive({});

// 定义个临时变量用于存储被点击的字段（图标）
let iconname = ref();
// 定义图标选择器是否打开
let iconStar = ref(false);
// 获取到图标
const onIcon = (e) => {
  console.log(e);
  form[iconname.value] = e;
  iconStar.value = false;
};
// 点击打开图标选择按钮
const clickicon = (name) => {
  iconname.value = name;
  iconStar.value = true;
};

// 新增
const isdialog = () => {
 fileList.value = "";
 title.value = 0;
 dialogVisible.value = true;
 for (const item of props.dialogLab) {
   form[item.field] = "";
 }

 for (const key in form) {
   for (const item of props.dialogLab) {
     if (item.type == "img" && item.field == key) {
       // console.log(data[key])
       fileList[key] = "";
     }
   }
 }
};

// 编辑
const isformdata = (data) => {


  nextTick(() => {
    form = data;

    if (form.menu_id && form.menu_id.length == 0) {
      form.menu_id = [];
    }
    // console.log(form.menu_id)
    // 用于图片裁剪
    for (const key in form) {
      for (const item of props.dialogLab) {
        if (item.type == "img" && item.field == key) {
          // console.log(data[key])
          fileList[key] = data[key].split(",").map((item) => {
            return { url: item };
          });
        }
      }
    }


    title.value = 1;
  });

  dialogVisible.value = true;
};
function onclone() {
  dialogVisible.value = false;

  if (title.value == 1) {
    for (const item of props.dialogLab) {
      fileList[item.field] = "";
    }
  }
}
function upload(file) {
  // console.log()
  let param = new FormData();
  param.append("file", file.file);
  updata(param).then((res) => {
    console.log(res.data);
    form[file.data] =
      "http://localhost:8000/uploand/avatar/" + res.data.filename + ".jpg";
  });
}
function onchange(e) {
  console.log(e);
}

// 图片
const onsubmit = () => {
  // console.log(e)
  // console.log(form)
  emit("formEmit", form, title);
  dialogVisible.value = false;
};
// 树形节点点击
const handleCheckChange = (data, checked, type) => {
  console.log(form);

  let arr = checked.checkedKeys.concat(checked.halfCheckedKeys);
  console.log("--------------");
  console.log(arr);
  form[type] = arr;
  console.log(from);
};

defineExpose({
  isdialog,
  isformdata,
});
</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
